<template>
    <view class="content">
		<view>报名中心</view>
        <active-form ref="activeForm" v-model="form" :formData="formData" num></active-form>

        <view class="btn-list">
            <view class="subform" @click="submit">提交表单</view>
            <view class="resetform" @click="reset">重置表单</view>
        </view>
    </view>
</template>

<script>
import ActiveForm from "@/components/active-form/active-form";

export default {
    components: {
        ActiveForm,
    },
    data() {
        return {
            //双向绑定回显
            form: {
				name: '',
				sex:''
				
 
            },
            //表单配置项
            formData: [
				{
				    id: "kjjn123sasd",
				    placeholder: "输入名字",
				    label: "姓名",
				    type: "text",
				    disabled: false,
				    rules: {
				        name: "name",
				        value: "",
				        verify: true,
				        errMess: "姓名未填写",
				         
				    },
				},
				{
				    id: "ukhjgas12dsas22",
				    placeholder: "选择",
				    label: "性别",
				    type: "select",
				    show: false, //是否显示
				    title: "请选择性别",
				    list: [
				        {
				            value: 1,
				            name: "男",
				        },
				        {
				            value: 2,
				            name: "女",
				        },
				    ],
				    rules: {
				        name: "sex",
				        value: "", //list.value  0 1
				        verify: false,
				        errMess: "性别未选择",
				    },
				},
				{
				    id: "kjjn123sasd222",
				    placeholder: "输入身份证",
				    label: "身份证",
				    type: "text",
				    disabled: false,
				    rules: {
				        name: "card",
				        value: "",
				        verify: true,
				        errMess: "身份证未填写",
				        regexp: '^1'  //正则校验
				    },
				},
				{
				    id: "uisd123fjks",
				    placeholder: "请输入手机号",
				    label: "手机",
				    type: "mobile",
				    rules: {
				        name: "mobile",
				        value: "", //字段值
				        verify: true,
				        errMess: "手机号格式不正确",
				    },
				    oneKeyPhone: true, //是否开启微信点击获取手机号
				    //微信获取手机号回调  和参数oneKeyPhone配套  由于小程序props传递函数会丢失（此处无效） 方法在目录active-form/mixins.js中自定义书写
				    // getphonenumber({details}) {
				    //
				    // }
				},
				
				{
				    id: "kjjn123sasd4",
				    placeholder: "输入身高",
				    label: "身高",
				    type: "text",
				    disabled: false,
				    rules: {
				        name: "high",
				        value: "",
				        verify: true,
				        errMess: "身高未填写",
				        regexp: '^1'  //正则校验
				    },
				},
				
				
				
				{
				    id: "kjjn123sasd3",
				    placeholder: "输入体重",
				    label: "体重",
				    type: "text",
				    disabled: false,
				    rules: {
				        name: "weight",
				        value: "",
				        verify: true,
				        errMess: "体重未填写",
				        regexp: '^1'  //正则校验
				    },
				},
				{
				    id: "kjjn123sasd2",
				    placeholder: "输入民族",
				    label: "民族",
				    type: "text",
				    disabled: false,
				    rules: {
				        name: "minzu",
				        value: "",
				        verify: true,
				        errMess: "民族未填写",
				        regexp: '^1'  //正则校验
				    },
				},
				{
				    id: "kjjn123sasd1",
				    placeholder: "就读学校信息",
				    label: "就读学校信息",
				    type: "text",
				    disabled: false,
				    rules: {
				        name: "school",
				        value: "",
				        verify: true,
				        errMess: "就读学校信息未填写",
				        regexp: '^1'  //正则校验
				    },
				},
				
				{
				    id: "kjjn123sasd22",
				    placeholder: "考试成绩",
				    label: "考试成绩",
				    type: "text",
				    disabled: false,
				    rules: {
				        name: "sum",
				        value: "",
				        verify: true,
				        errMess: "考试成绩未填写",
				        regexp: '^1'  //正则校验
				    },
				},
				{
				    id: "kjjn123sasd23",
				    placeholder: "排名",
				    label: "排名",
				    type: "text",
				    disabled: false,
				    rules: {
				        name: "sort",
				        value: "",
				        verify: true,
				        errMess: "排名未填写",
				        
				    },
				},
				
				
				{
				    id: "ukhjgas12dsas25",
				    placeholder: "是否特长",
				    label: "是否特长",
				    type: "select",
				    show: false, //是否显示
				    title: "请选择特长",
				    list: [
				        {
				            value: 1,
				            name: "是",
				        },
				        {
				            value: 2,
				            name: "否",
				        },
				    ],
				    rules: {
				        name: "techang",
				        value: "", //list.value  0 1
				        verify: false,
				        errMess: "特长未选择",
				    },
				},
 
 
                {
                    id: "asdfd11fgd",
                    label: "考试成绩和排名截图",
                    type: "file",
                    maxCount: 1, //最大选择图片的数量
                    multiple: false, //是否开启图片多选，部分安卓机型不支持  false	true
                    accept: 'image',//接受的文件类型，file只支持H5（只有微信小程序才支持把accept配置为all、media）  可选 all | media | image | file | video
                    capture: ['album', 'camera'],// 图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头 String | Array
                    sizeType: ['original', 'compressed'],//original 原图，compressed 压缩图，默认二者都有，H5无效
                    compressed: true,//当accept为video时生效，是否压缩视频，默认为true  Boolean	true	false
                    camera: 'back', //当accept为video时生效，可选值为back或front  	String	back	-
                    maxSize: Number.MAX_VALUE,// 选择单个文件的最大大小，单位B(byte)，默认不限制	String | Number
                    previewImage: true,//是否在上传完成后展示预览图	Boolean	true	false
                    disabled: false,//是否禁用
                    rules: {
                        name: "photo",
                        value: [],//显示已上传的文件列表  回显   [{url:'https://xxx.cn'}]
                        verify: false,
                        errMess: "请选择头像",
                    },
                },
 
            ],
        };
    },
    methods: {
        // 提交表单
        submit() {
			console.log(this.form)
            this.$refs.activeForm.vervify()
                .then(async (form) => {
                   uni.uploadFile({
                   	url:"http://bm.hsszxxh.com/bm",
                   	method:"post",
                   	formData:{
						data:this.form
					}
                   }).then(r=>{
                   	console.log(r)
                   })
                })
                .catch((err) => {
                    console.log("err", err);
                });  //表单校验
				

        },
        //重置表单
        reset() {
            this.$refs.activeForm.resetForm()
        }
    },
};
</script>

<style lang="less">
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	margin: 20px;

    .btn-list {
        display: flex;
        .subform {
            margin: 30rpx;
            padding: 20rpx 60rpx;
            border-radius: 18rpx;
            background-color: bisque;
        }

        .resetform {
            margin: 30rpx;
            padding: 20rpx 60rpx;
            border-radius: 18rpx;
            background-color: #6e6a67;
            color: #ffffff;
        }
    }

}
</style>
